<template>
  <div>
    <el-breadcrumb separator="/" class="mbx">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 面包屑 -->
    <el-input
      placeholder="请输入内容"
      v-model="input3"
      class="input-with-select"
    >
      <el-button slot="append" icon="el-icon-search"></el-button>
    </el-input>
    <el-button
      type="primary"
      class="bun-su"
      @click="adddialogFormVisible = true"
      >添加用户</el-button
    >
    <!-- 添加用户 -->
    <el-table :data="Data" border>
      <el-table-column fixed type="index" label="#"> </el-table-column>
      <el-table-column prop="username" label="姓名"> </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="mobile" label="电话"> </el-table-column>
      <el-table-column prop="role_name" label="角色"> </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.mg_state"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="onchange(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template class="annui" slot-scope="scope">
          <el-button
            type="primary"  
            icon="el-icon-edit"
            circle
            @click="onedit(scope.row)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="danger(scope.row)"
          ></el-button>
          <el-button
            type="warning"
            icon="el-icon-setting"
            circle
            @click="warning(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改弹出框 -->
    <el-dialog title="修改用户" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名">
          <el-input v-model="form.name" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.mobile" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="que">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 添加弹出框 -->
    <el-dialog title="添加用户" :visible.sync="adddialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.pass"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.mobile"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="adddialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="AddFormVisible">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 渲染表格 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
    >
    </el-pagination>
    <!-- 分页器 -->
    <el-dialog title="分配角色" :visible.sync="dialogFormVisible1">
      <el-form :model="form">
        <el-form-item label="当前用户：">
          <!-- <el-input v-model="form.name" autocomplete="off"></el-input> -->
          <span>{{ usernames }}</span>
        </el-form-item>
        <el-form-item label="当前角色：">
          <!-- <el-input v-model="form.name" autocomplete="off"></el-input> -->
          <span>{{ juese ? "" : "超级管理员" }}</span>
        </el-form-item>
        <el-form-item label="分配新角色">
          <el-select
            v-model="region"
            placeholder="请选择活动区域"
            @change="opChange(region)"
          >
            <el-option
              :label="item.roleName"
              :value="item.id"
              v-for="item in roles"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="guanli">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 角色修改 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      input3: "",
      value: true,
      tableData: [],
      iii: { pagenum: 1, pagesize: 5 },
      dialogFormVisible: false,
      dialogFormVisible1: false,
      adddialogFormVisible: false,
      form: {
        name: "",
        email: "",
        mobile: "",
        pass: "",
      },
      pagesize: 4,
      pagenum: 1,
      id: "",
      users: "",

      usernames: "",
      juese: "",
      roles: [],
      region: "",
      jueseId: "",
    };
  },
  methods: {
    //修改状态
    onchange(item) {
      console.log(item);
      this.$http({
        url: `users/${item.id}/state/${item.mg_state}`,
        method: "put",
      }).then((res) => {
        console.log(res);
        this.$message({
          type: "success",
          message: res.meta.msg,
        });
      });
    },
    //编辑数据
    onedit(item) {
      console.log(item);
      this.dialogFormVisible = true;
      this.id = item.id;
      this.$http.get(`/users/${item.id}`).then((res) => {
        console.log(res);
        this.form.name = res.data.username;
        this.form.email = res.data.email;
        this.form.mobile = res.data.mobile;
      });
    },
    //修改的确认按钮
    que() {
      this.dialogFormVisible = false;
      this.$http
        .put(`users/${this.id}`, {
          email: this.form.email,
          mobile: this.form.mobile,
        })
        .then((res) => {
          console.log(res);
          this.getUserList();
        });
    },
    //进入页面请求所有的数据
    getUserList() {
      this.$http.get("/users", { params: this.iii }).then((res) => {
        console.log(res.data.users);
        this.tableData = res.data.users;
      });
    },
    //删除
    danger(item) {
      console.log(item);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.delete(`users/${item.id}`).then((res) => {
            console.log(res);
            this.getUserList();
            this.$message({
              type: "success",
              message: res.meta.msg,
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //添加
    AddFormVisible() {
      console.log(this.form);
      this.$http
        .post("/users", {
          username: this.form.name,
          password: this.form.pass,
          email: this.form.email,
          mobile: this.form.mobile,
        })
        .then((res) => {
          console.log(res);
          if (res.meta.status != 201) {
            this.$message({
              type: "errot",
              message: res.meta.msg,
            });
          } else {
            this.$message({
              type: "success",
              message: res.meta.msg,
            });
            this.form = {
              name: "",
              email: "",
              mobile: "",
              pass: "",
            };
            this.adddialogFormVisible = false;
            this.getUserList();
          }
        });
    },
    //分页
    handleSizeChange(res) {
      this.pagesize = res;
    },
    handleCurrentChange(res) {
      this.pagenum = res;
    },
    //设置角色
    warning(item) {
      console.log(item.id);
      this.jueseId = item.id;

      this.$http({
        url: `users/${item.id}`,
        method: "get",
      }).then((res) => {
        console.log(res);
        this.usernames = res.data.username;
        this.juese = res.data.rid;
        this.$message({
          type: "success",
          message: res.meta.msg,
        });
      });
      this.$http.get(`roles`).then((res) => {
        console.log(res);
        this.roles = res.data;
      });
      this.dialogFormVisible1 = true;
    },
    opChange(item) {
      console.log(item);
      this.juese = item;
      console.log(this.juese);
    },
    //确认角色按钮
    guanli() {
      this.dialogFormVisible1 = false;
      console.log(this.juese);
      console.log(this.jueseId);
      this.$http({
        url: `users/${this.jueseId}/role`,
        method: "put",
        data: { rid: this.juese },
      }).then((res) => {
        // this.juese = res.data.rid;
        console.log(res);
        this.getUserList();

        this.$message({
          type: "success",
          message: res.meta.msg,
        });
      });
    },
  },
  mounted() {
    this.getUserList();
  },
  //搜索
  watch: {
    input3() {
      this.$http.get("/users", { params: this.iii }).then((res) => {
        console.log(res.data.users);
        this.tableData = res.data.users.filter((item) => {
          return item.username.includes(this.input3);
        });
      });
    },
  },
  //计算属性
  computed: {
    Data() {
      return this.tableData.slice(
        this.pagesize * (this.pagenum - 1),
        this.pagesize * this.pagenum
      );
    },
  },
};
</script>
<style>
.el-main {
  line-height: 0px !important;
  text-align: left;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-input-group {
  line-height: normal;
  display: inline-table;
  width: 40%;
  border-collapse: separate;
  border-spacing: 0;
}
.bun-su {
  margin-left: 20px;
}
.mbx {
  margin-bottom: 20px;
}
</style>
